<!--营业- 交班  -  弹窗组件-->
<template>
  <CustomDialog v-model:visible="isShowDialog" class="dialog-box" top="10vh">
    <div class="dialog-content">
      <div class="right-box">
        <!-- 交班明细 -->
        <div class="detail-pay-box">
          <HandoverBillCard
            style="display: flex; width: 100%"
            ref="handoverBillCard"
            class="HandoverBillCard"
            :selectCheckedList="selectCheckedList"
          />
        </div>
        <div class="oper">
          <div class="check-item" v-for="(item, index) in checkedList" :key="index">
            <el-checkbox v-model="item.checked" @change="checkedClick(item)">
              {{ item.label }}
            </el-checkbox>
          </div>
        </div>
        <div class="button-box">
          <!-- TODO：打印单据 -->
          <el-button @click="handlePrint" :loading="printLoading">
            {{ printLoading ? '打印中...' : '打印单据' }}
          </el-button>
          <el-button type="primary" @click="handleDeskEndWork" :loading="endWorkLoading">
            {{ endWorkLoading ? '交班中...' : '交班' }}
          </el-button>
        </div>
      </div>
    </div>
  </CustomDialog>
</template>

<script setup lang="ts">
import { ref, computed, nextTick, watch } from 'vue'

import { ElMessage } from 'element-plus'
import { deskEndWork, printShiftReport } from '@/api/desktop'
import { throttle } from '@/utils/toolsValidate'
import { useUserStore } from '@/stores/user'
import CustomDialog from '../../CustomDialog/Index.vue'
import HandoverBillCard from '../HandoverBillCard/Index.vue'

interface Props {
  modelValue: boolean
}

const props = defineProps<Props>()
const emit = defineEmits(['update:modelValue'])

const userStore = useUserStore()
const handoverBillCard = ref<any>(null)

// Loading状态
const printLoading = ref(false)
const endWorkLoading = ref(false)

const isShowDialog = computed({
  get() {
    return props.modelValue
  },
  set(val: boolean) {
    emit('update:modelValue', val)
  }
})

const selectCheckedList = ref<any[]>([])

const checkedList = ref([
  {
    label: '大类销售汇总',
    value: 1,
    checked: false
  },
  {
    label: '销售类目汇总',
    value: 2,
    checked: false
  },
  {
    label: '账单明细',
    value: 3,
    checked: false
  },
  {
    label: '支付方式明细',
    value: 4,
    checked: false
  },
  {
    label: '实收汇总',
    value: 5,
    checked: false
  },
  {
    label: '虚收汇总',
    value: 6,
    checked: false
  },
  {
    label: '台区消费汇总',
    value: 7,
    checked: false
  },
  {
    label: '充值明细',
    value: 8,
    checked: false
  },
  {
    label: '挂账明细',
    value: 9,
    checked: false
  },
  {
    label: '反结账记录',
    value: 10,
    checked: false
  }
])

// 监听弹窗显示状态
watch(isShowDialog, val => {
  if (val) {
    nextTick(() => {
      handoverBillCard.value?.getTrcket()
    })
  }
})

// 获取选中的数据
function checkedClick(item: any) {
  selectCheckedList.value = checkedList.value.filter(data => data.checked)
  console.log(selectCheckedList.value, 'selectCheckedList')
}

// 交班
const handleDeskEndWork = throttle(async function () {
  if (endWorkLoading.value) return

  endWorkLoading.value = true
  try {
    const res: any = await deskEndWork({
      check_list: selectCheckedList.value.map(item => item.value)
    })
    if (res.status === 200) {
      ElMessage.success('交班成功')
      emit('update:modelValue', false)
      // 刷新开班状态
      await userStore.fetchDeskWorkStatus()
    }
  } catch (error) {
    ElMessage.error('交班失败')
  } finally {
    endWorkLoading.value = false
  }
}, 3000)

// 打印数据
async function handlePrint() {
  if (printLoading.value) return

  printLoading.value = true
  try {
    // 获取当前交班单的shift_id
    debugger
    // const shiftId = handoverBillCard.value?.workLogTicketDetailData?.detail.shiftReportInfo?.shift_id
    // if (!shiftId) {
    //   ElMessage.error('无法获取交班单号，请先获取交班数据')
    //   return
    // }
    const res: any = await printShiftReport({
      check_list: selectCheckedList.value.map(item => item.value)
    })
    // const res = await workLogTicketDetail({
    //   shift_id: shiftId
    // })
    if (res.status === 200) {
      console.log(res.data, 'res.data')
      ElMessage.success('打印数据获取成功')
    }
  } catch (error) {
    ElMessage.error('打印失败')
  } finally {
    printLoading.value = false
  }
}
</script>

<style lang="scss" scoped>
.dialog-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.right-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 600px;

  .detail-pay-box {
    width: 100%;
    flex: 1;
    overflow-x: hidden;
    background: #ffffff;
    box-sizing: border-box;
    overflow-y: hidden;

    > .handover-card-box {
      display: flex !important;
      width: 100%;
      height: 100%;
    }
  }

  .HandoverBillCard {
    border: 0;
    box-shadow: none;
    ::v-deep.flex-col {
      width: 100%;
    }
  }

  //滚动条整体的大小
  .detail-pay-box::-webkit-scrollbar {
    width: 6px !important;
    height: 0 !important;
  }
  //滚动条里滑动的滑块
  .detail-pay-box::-webkit-scrollbar-thumb {
    height: 200px !important;
    background: #d2d2d2 !important;
    border-radius: 3px !important;
  }
  //滚动条底层样式
  .detail-pay-box::-webkit-scrollbar-track {
    display: none !important;
  }

  .button-box {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin-top: 30px;
    gap: 20px;

    .el-button {
      width: 190px;
      height: 52px;
      font-size: 18px;
      font-family:
        PingFang SC,
        PingFang SC-Regular;
      font-weight: 400;
      border-radius: 12px;

      &:first-child {
        border: 1px solid #d2d2d2;
        color: #353535;
      }

      &:last-child {
        background: #7c0a03;
        border-color: #7c0a03;
        color: #ffffff;

        &:hover {
          background: #5a0702;
          border-color: #5a0702;
        }
      }
    }
  }
}

.oper {
  padding: 20px 30px;
  background: #f4f4f4;
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  flex-wrap: wrap;
  gap: 20px;

  .check-item {
    display: flex;
    align-items: center;

    :deep(.el-checkbox) {
      height: 0;

      .el-checkbox__label {
        font-size: 14px;
        font-family:
          PingFang SC,
          PingFang SC-Regular;
        font-weight: 400;
        color: #333333;
      }
    }
  }
}
</style>
